<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="./common/images/favicon.png">

    <title>群发消息</title>
  

    <!-- Bootstrap core CSS -->
    <link href="js/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <link rel="stylesheet" href="./assets/fonts/font-awesome-4/css/font-awesome.min.css">
    <link href="./js/icheck/skins/all.css" rel="stylesheet">
    <link href="./assets/css/style.css" rel="stylesheet" />

    <style type="text/css">
        .btnDiv
        {
            margin-right: 25px;
            float: left;
        }

        .btnDiv button
        {
            width: 90px; 
            border-radius: 5px;
            margin: 5px;
        }

        .tableDiv
        {
            padding: 20px 20px 50px 20px; 
            background-color: #d7d7d7; 
            width: 700px;
            text-align: center;
        }

        .tableDiv table
        {
            width: 400px;
        }

        .tableDiv table tr
        {
            background-color: #fff;
            text-align: center;
        }

        .tableDiv table th
        {
            text-align: center;
        }


        .msgDiv
        {
            float: left; 
            background-color: #d7d7d7;
        }

        .msgDiv .infoItem
        {
            margin: 10px 0; 
            line-height: 34px;
        }

        .msgDiv .infoItem .desc
        {
            width: 140px; 
            font-size: 16px;
            color:#000;
            padding: 0;
            background-color: #fff;
        }
        .msgDiv .infoItem .desc li
        {
            padding: 0 10px 0 10px;
            cursor: pointer;
        }

        .msgDiv .infoItem .desc .active
        {
            background-color: #3576ec;
        }

        .msgDiv .infoItem .desc .active a
        {
            color: #fff;
        }

        .msgDiv .infoItem .desc a
        {
            display: block;
            line-height: 28px;
        }

        .msgDiv .infoItem .value
        {
            width: calc( 100% - 140px);
        }

        #msgContent
        {
            padding:10px;
            background-color: #fff;
            min-height: 150px;
        }

        #msgContent .light
        {
            color: #0034fd;
            line-height: 28px;
        }

        .msgDiv .nextDiv
        {
            margin: 35px;

        }

        .msgDiv .nextDiv button
        {
            width: 90px; 
            border-radius: 5px;
            margin: 5px;
        }




        .descDiv
        {
            float: left;
            margin-left: 20px;
        }

        .descDiv p
        {
            margin-bottom: 0;
        }

        .descDiv p:first-child
        {
            font-weight: bold;
            font-size: 18px;
        }

        .descDiv p span
        {
            color: #0034fd;
        }


        .userDiv
        {
            float: left;
            display: none;
        }

        .selDiv
        {
            width: 100px;
            padding: 0;
        }

        .selDiv button
        {
            width: 90px; 
            border-radius: 5px;
        }

        @media (max-width: 768px)
        {
            .tableDiv
            {
                width: 100%;
            }

            .tableDiv table
            {
                width: 100%;
            }
        }

    </style>

</head>
<body>
    <!-- Fixed navbar -->
    <div id="head-nav" class="navbar navbar-default navbar-fixed-top">

    </div>

    <div id="cl-wrapper" class="fixed-menu">

        <div class="container-fluid" id="pcont">
                <div class="col-md-12" style="padding-right: 0;">
                    <div class="block-flat">
                        <div class="header">      
                            <div class="pull-left">
                                <p class="jb_underline">提现审核&#62;&#62;提现详情</p>
                            </div>                      
                            <div class="clearfix"></div>
                        </div>
                        <div class="content">
                            <div class="btnDiv">
                                <div>
                                    <button type="button" class="btn btn-default" onclick="myPower()">我的权限</button>
                                </div>
                                <div>
                                    <button type="button" class="btn btn-default" onclick="sendMsg()">群发消息</button>
                                </div>
                                <div>
                                    <button type="button" class="btn btn-default" onclick="msgTrigger()">消息触发</button>
                                </div>
                            </div>

                            <div class="msgDiv col-sm-6">
                                <div class="col-sm-12 infoItem">
                                    <div class="col-sm-3 desc">
                                        <li onclick="msgChange(1, this)">
                                            <a>任务领取</a>
                                        </li>
                                        <li onclick="msgChange(2, this)">
                                            <a>任务提交</a>
                                        </li>
                                        <li onclick="msgChange(3, this)">
                                            <a>任务过期</a>
                                        </li>
                                        <li onclick="msgChange(4, this)">
                                            <a>任务审核通过</a>
                                        </li>
                                        <li onclick="msgChange(5, this)">
                                            <a>任务审核不通过</a>
                                        </li>
                                        <li onclick="msgChange(6, this)">
                                            <a>提现申请</a>
                                        </li>
                                        <li onclick="msgChange(7, this)">
                                            <a>提现审核通过</a>
                                        </li>
                                        <li onclick="msgChange(8, this)">
                                            <a>提现审核不通过</a>
                                        </li>
                                        <li onclick="msgChange(9, this)">
                                            <a>结算通知</a>
                                        </li>
                                        <li onclick="msgChange(10, this)">
                                            <a>封号通知</a>
                                        </li>
                                        <li onclick="msgChange(11, this)">
                                            <a>解封通知</a>
                                        </li>
                                    </div>
                                    <div class="col-sm-9 value">
                                        <!-- <textarea id="msgContent" class="form-control" style="min-height: 150px;"></textarea> -->
                                        <div id="msgContent"></div>
                                    </div>
                                </div>

                                <div class="pull-right nextDiv">
                                    <button type="button" class="btn btn-default" onclick="gotoUser()">提交</button>
                                </div>
                            </div>

                            <div class="descDiv">
                                <p>关联词缀：</p>
                                <p>用户名：<span>${user_name}</span></p>
                                <p>用户id：<span>${user_id}</span></p>
                                <p>任务名：<span>${mission_name}</span></p>
                                <p>任务id：<span>${mission_id}</span></p>
                                <p>提现申请id：<span>${cash_id}</span></p>
                            </div>                        

                            <div class="clearfix"></div>
                        </div>
                    </div>              
                </div>
        </div>
    </div>

  <script type="text/javascript" src="js/jquery.js"></script>
  <script src="js/bootstrap/dist/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="./js/icheck/icheck.min.js"></script>

  <script type="text/javascript">
        var headerUrl = "./header.html"
        $("#head-nav").load(headerUrl,function(response,status,xhr){

        });

        function sendMsg() {
            // body...
            window.location.href='./sendMsg.html';
        }

        function myPower() {
            // body...
            window.location.href='./myPower.html';
        }

        function msgTrigger() {
            // body...
            window.location.href='./msgTrigger.html';
        }

        var msgContent = document.getElementById("msgContent");
        function msgChange( type, target ) {
            // body...
            $(".infoItem .desc li").each(function(){
                if( $(this).hasClass("active"))
                {
                    $(this).removeClass("active");
                }
            });

            $(target).addClass("active");

            switch ( type )
            {
                case 1:
                    var content = '\
                        <p>【任务领取】亲爱的用户，您已领取任务“<span class="light">${mission_name}</span>”(任务ID：<span class="light">${mission_id}</span>)，请仔细阅读任务要求和图例，并于任务截止时间前提交相关材料，祝您顺利。【兼贝网】</p>';

                    msgContent.innerHTML = content;
                    break;
                case 2:
                    var content = '\
                        <p>【任务提交】亲爱的用户，您已提交任务“<span class="light">${mission_name}</span>”(任务ID：<span class="light">${mission_id}</span>)，审核结果将在审核时间结束后通知您，请留意相关消息，祝您愉快。【兼贝网】</p>';

                    msgContent.innerHTML = content;
                    break;
                case 3:
                    var content = '\
                        <p>【任务过期】亲爱的用户，您领取的任务“<span class="light">${mission_name}</span>”(任务ID：<span class="light">${mission_id}</span>)因未在截止时间前提交材料导致过期，请在“我的任务”-“已结束”中查看。【兼贝网】</p>';

                    msgContent.innerHTML = content;
                    break;
                case 4:
                    var content = '\
                        <p>【任务审核】亲爱的用户，您提交的任务“<span class="light">${mission_name}</span>”(任务ID：<span class="light">${mission_id}</span>)已通过审核，相关奖励稍后将发放，请注意查看。【兼贝网】</p>';

                    msgContent.innerHTML = content;
                    break;
                case 5:
                    var content = '\
                        <p>【任务审核】亲爱的用户，您提交的任务“<span class="light">${mission_name}</span>”(任务ID：<span class="light">${mission_id}</span>)因不符合任务要求未通过审核，请在“我的任务”-“已结束”中查看。【兼贝网】</p>';

                    msgContent.innerHTML = content;
                    break;
                case 6:
                    var content = '\
                        <p>【提现申请】亲爱的用户，已收到您的提现申请（提现申请ID：<span class="light">${cash_id}</span>），我们会尽快为您处理，请留意相关消息【兼贝网】</p>';

                    msgContent.innerHTML = content;
                    break;
                case 7:
                    var content = '\
                        <p>【提现审核】亲爱的用户，您的提现申请（提现申请ID：<span class="light">${cash_id}</span>）已通过审核，对应金额稍后将转账到您提交的网银账号中，请注意查收，请在“我的奖励”-“提现记录”中查看【兼贝网】</p>';

                    msgContent.innerHTML = content;
                    break;
                case 8:
                    var content = '\
                        <p>【提现审核】亲爱的用户，您的提现申请（提现申请ID：<span class="light">${cash_id}</span>）因账户核实异常而未通过审核，详情请联系客服【兼贝网】</p>';

                    msgContent.innerHTML = content;
                    break;
                case 9:
                    var content = '\
                        <p>【结算通知】亲爱的用户，您在2017年1月结算统计已出，请在“我的奖励”-“已结算收入”中查看。【兼贝网】</p>';

                    msgContent.innerHTML = content;
                    break;
                case 10:
                    var content = '\
                        <p></p>';

                    msgContent.innerHTML = content;
                    break;
                case 11:
                    var content = '\
                        <p></p>';

                    msgContent.innerHTML = content;
                    break;
            }
        }

        //默认选中第一项
        var content1 = $(".infoItem .desc li")[0];
        msgChange( 1, content1 );

  </script>

  </body>

</html>
